<template>
  <el-container class="admin-layout">
    <el-aside width="200px">
      <div class="logo">
        <router-link to="/">
          <h1>书签导航</h1>
        </router-link>
      </div>
      
      <el-menu
        :default-active="$route.path"
        class="admin-menu"
        router
      >
        <el-menu-item index="/admin/dashboard">
          <i class="el-icon-monitor"></i>
          <span>控制面板</span>
        </el-menu-item>
        
        <el-menu-item index="/admin/bookmarks">
          <i class="el-icon-star-off"></i>
          <span>书签管理</span>
        </el-menu-item>
        
        <el-menu-item index="/admin/categories">
          <i class="el-icon-folder"></i>
          <span>分类管理</span>
        </el-menu-item>
        
        <el-menu-item index="/admin/import">
          <i class="el-icon-upload"></i>
          <span>导入书签</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header height="60px">
        <div class="header-left">
          <h2>{{ pageTitle }}</h2>
        </div>
        
        <div class="header-right">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="user-dropdown">
              {{ user ? user.username : '' }}
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AdminLayout',
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return this.$route.meta.title || '管理后台'
    }
  },
  created() {
    // 如果没有用户信息，获取用户信息
    if (!this.user) {
      this.$store.dispatch('getInfo')
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.$confirm('确认退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('logout').then(() => {
            this.$router.push('/admin/login')
            this.$message.success('已退出登录')
          })
        }).catch(() => {})
      }
    }
  }
}
</script>

<style lang="less" scoped>
.admin-layout {
  height: 100vh;
  
  .el-aside {
    background-color: #304156;
    color: #fff;
    
    .logo {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #2b2f3a;
      
      a {
        color: #fff;
        text-decoration: none;
        
        h1 {
          margin: 0;
          font-size: 20px;
        }
      }
    }
    
    .admin-menu {
      border: none;
      background-color: transparent;
      
      .el-menu-item {
        color: #bfcbd9;
        
        &:hover, &:focus {
          background-color: #263445;
        }
        
        &.is-active {
          color: #409EFF;
          background-color: #263445;
        }
        
        i {
          color: inherit;
        }
      }
    }
  }
  
  .el-header {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    
    .header-left {
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
    }
    
    .header-right {
      .user-dropdown {
        cursor: pointer;
        color: #606266;
        
        i {
          margin-left: 5px;
        }
      }
    }
  }
  
  .el-main {
    background-color: #f5f7fa;
    padding: 20px;
  }
}
</style> 